{% extends 'blog_base.html' %}
{% block head %}
    <style>/* 卡片悬停效果 */
    .card-hover .card {
        transition: all 0.3s ease;
    }

    .card-hover:hover .card {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    /* 文本截断 */
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }</style>
{% endblock %}
{% block title %}
    博客首页
{% endblock %}
{% block main %}
    <h1>博客列表</h1>
    <div class="row row-cols-2 row-gap-4">
        {% for blog in blogs %}
            <div class="col mb-4">
                <a href="{% url 'bootstrapApp:blog_detail' blog_id=blog.id %}"
                   class="text-decoration-none text-dark card-hover">
                    <div class="card border-0 shadow-sm h-100">
                        <!-- 卡片头部：去除边框并添加渐变背景 -->
                        <div class="card-header bg-transparent border-bottom-0 py-3">
                            <h5 class="card-title mb-0 text-primary">{{ blog.title }}</h5>
                        </div>

                        <!-- 卡片正文：优化文字排版 -->
                        <div class="card-body pt-0">
                            <div class="card-text text-muted line-clamp-3">
                                {{ blog.content|striptags|truncatechars:200 }}
                            </div>
                        </div>

                        <!-- 卡片底部：使用Flex布局并去除边框 -->
                        <div class="card-footer bg-transparent border-top-0 d-flex align-items-center justify-content-between py-3">
                            <div class="d-flex align-items-center">
                                <img src="{% static 'image/cat.png' %}"
                                     class="rounded-circle me-2"
                                     height="40"
                                     alt="{{ blog.author.name }}头像">
                                <span class="text-muted small">{{ blog.author.name }}</span>
                            </div>
                            <div class="text-end">
                    <span class="text-muted small">
                        <i class="bi bi-clock-history me-1"></i>
                        {{ blog.pub_time|date:"Y/m/d H:i" }}
                    </span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        {% endfor %}


    </div>
{% endblock %}